<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // async function async1() {
      //   console.log("async1 start");
      //   await async2();
      //   console.log("async1 end");
      // }
      // async function async2() {
      //   console.log("async2");
      // }
      // console.log("script start");
      // setTimeout(function () {
      //   console.log("settimeout");
      // });
      // async1();
      // new Promise(function (resolve) {
      //   console.log("promise1");
      //   resolve();
      // }).then(function () {
      //   console.log("promise2");
      // });
      // console.log("script end");

      //  script start
      //  async1 start
      //  async2
      //  promise1
      //  script end
      //  async1 end
      //  promise2
      //  settimeout

      // 首先，事件循环从宏任务（macrostack）队列开始，这个时候，宏任务(整体script、setTimeout、setInterval)队列中，只有一个 script (整体代码)任务 ()。
      // 首先执行 console.log('script start')，输出 ‘script start'
      // 遇到 setTimeout 把 console.log('setTimeout') 放到 macrotask 队列中
      // 执行 aync1() 输出 ‘async1 start' 和 'async2' ,把 console.log('async1 end') 放到 micro 队列中
      // 执行到 promise ，输出 'promise1' ，把 console.log('promise2') 放到  micro 队列中
      // 执行 console.log('script end')，输出 ‘script end'
      // macrotask 执行完成会执行 microtask ，把 microtask quene 里面的 microtask 全部拿出来一次性执行完，所以会输出 'async1 end' 和 ‘promise2'
      // 开始新一轮的事件循环，去除执行一个 macrotask 执行，所以会输出 ‘setTimeout'
    </script>
    <script>
      // setTimeout(() => {
      //   console.log(1);
      // }, 0);
      // new Promise((resolve, reject) => {
      //   console.log(2);
      //   resolve("p1");
      //   new Promise((resolve, reject) => {
      //     console.log(3);
      //     setTimeout(() => {
      //       resolve("setTimeout2");
      //       console.log(4);
      //     }, 0);
      //     resolve("p2");
      //   }).then((data) => {
      //     console.log(data);
      //   });
      //   setTimeout(() => {
      //     resolve("setTimeout1");
      //     console.log(5);
      //   }, 0);
      // }).then((data) => {
      //   console.log(data);
      // });
      // 2 （同步代码，Promise 构造函数执行）
      // 3 （同步代码，内部 Promise 构造函数执行）
      // p2 （内部 Promise 的 resolve 被调用）
      // p1 （外部 Promise 的 resolve 被调用）
      // 4 （setTimeout 内部 Promise 的回调函数执行）
      // 5 （外部 setTimeout 的回调函数执行）
      // 1 （最外层 setTimeout 的回调函数执行）
    </script>
    <script>
      // console.log(11);
      // setTimeout(() => {
      //   console.log(12);
      //   let p = new Promise((resolve, reject) => {
      //     resolve(13);
      //   });
      //   p.then((data) => {
      //     console.log(data);
      //   });
      //   console.log(15);
      // }, 0);
      // console.log(14);
      // 11 14 12 15 13
    </script>
    <script>
      // const handleClick = () => {
      //   console.log("iop");
      //   new Promise((resolve, reject) => {
      //     console.log("promise-1");
      //     setTimeout(() => {
      //       console.log("promise-timeeout"); //1
      //     }, 0);
      //     process.nextTick(function () {
      //       console.log("promise---process.nextTick-1");
      //     });
      //     resolve("222");
      //   }).then((res) => {
      //     setTimeout(() => {
      //       console.log("promise-then-timeout"); //2
      //     }, 0);
      //     console.log("promise-then");
      //     process.nextTick(function () {
      //       console.log("promise.then---process.nextTick-1");
      //     });
      //   });
      //   console.log("iop3333");
      //   setTimeout(() => {
      //     console.log("timeout-222");
      //   }, 0); //3
      //   process.nextTick(function () {
      //     console.log("process.nextTick-1");
      //   });
      // };
      // console.log(handleClick());
      // iop （函数内部的同步代码）
      // promise-1 （Promise 构造函数中的同步代码）
      // process.nextTick-1 （process.nextTick 事件在 Promise 的构造函数中）
      // iop3333 （函数内部的同步代码）
      // process.nextTick-1 （函数中的 process.nextTick 事件）
      // promise---process.nextTick-1 （Promise 构造函数中的 process.nextTick 事件的回调）
      // promise-then （.then 方法中的同步代码）
      // promise.then---process.nextTick-1 （.then 中的 process.nextTick 事件的回调）
      // promise-timeeout （Promise 构造函数中的 setTimeout 回调）
      // promise-then-timeout （.then 中的 setTimeout 回调）
      // timeout-222 （setTimeout 回调）
    </script>
    <script>
      // async function fn1() {
      //   console.log(1);
      //   await fn2();
      //   console.log(2);
      // }
      // async function fn2() {
      //   console.log("fn2");
      // }
      // fn1();
      // console.log(3);
      //1 fn2 3 2
    </script>
  </body>
</html>
